<template>
  <div class="box">
    <div class="top">
      <span>ToDoList</span>
      <span><el-input class="input" v-model="data.input" @change="addList" placeholder="请输入内容" /></span>
    </div>
    <div class="cont">
      <h1>正在进行</h1>
      <ul>
        <li v-for="item in data.list" :key="item.id" v-show="item.status == false">
          <el-checkbox v-model="item.status" @click="editStatus" />
          <p>{{ item.name }}</p>
          <el-button @click="delList(item.id)">删除</el-button>
        </li>
      </ul>
      <h1>已经完成</h1>
      <ul>
        <li v-for="item in data.list" :key="item.id" v-show="!item.status == false">
          <el-checkbox v-model="item.status" @click="editStatus" />
          <p>{{ item.name }}</p>
          <el-button @click="delList(item.id)">删除</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const data = reactive({
  input: '',
  checked1: false,
  list: store.state.list
})

const addList = () => {
  store.commit('addList', data.input)
  data.input = ""
}

const editStatus = () => {
  store.commit('editStatus')
}

const delList = (id) => {
  store.commit('del', id)
}

</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #000;
  color: #fff;
  font-size: 30px;

  .input {
    width: 300px;
    height: 80%;
    border: 0;
  }
}

.box {
  width: 100%;

  .cont {
    width: 800px;
    background: #eee;
    position: fixed;
    left: 50%;
    margin-left: -400px;

    ul {
      width: 800px;

      li {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 20px 0;

        p {
          flex: 1;
          text-align: left;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>